<!-- 告警中心入口 -->
<template>
    <div class="alarm-center index-box">
        <div class="navbar-logo">
            <span>人工智能精准供热系统</span>
            <!-- 个人信息 -->
            <div style="position: absolute;top: 0px;right: 113px;font-size: 16px;height: 50px;line-height: 50px;color: #ffffff">
                <!--<img :src="userInfo.username" style="display: inline-block;width: 32px;height: 32px"/>-->
                <span>{{getUserInfo.realname}}</span>
            </div>
            <!-- 退出 -->
            <div class="el-icon-switch-button" style="position: absolute;top: 13px;right: 23px;font-size: 24px;color: #fff;cursor:pointer;" @click="$router.push({path: '/Home'})"></div>
        </div>
        <div class="ctn">
            <!-- 顶部按钮组 -->
            <div class="ctn-top-bar">
                <div class="ctn-top-bar-l">
                    <span class="fl" @click="returnBack">导航页</span>
                </div>
                <div class="ctn-top-bar-r">

                    <span class="rl" v-if="weather">{{weather.updateTime}}&nbsp;&nbsp;{{weather.city}}&nbsp;&nbsp;{{weather.temp}}℃&nbsp;&nbsp;{{weather.weaTxt}}&nbsp;&nbsp;</span>
                </div>
            </div>
            <!-- 右边tab切换页 -->
            <div class="main-ctn">
                <div class="tabs">
                    <span :class="['tab-item',{'active':currentTab ===1}]" @click="currentTab = 1">告警统计</span>
                    <span :class="['tab-item',{'active':currentTab ===2}]" @click="currentTab = 2">数据中心</span>
                    <span :class="['tab-item',{'active':currentTab ===3}]" @click="currentTab = 3">配置中心</span>
                </div>
                <!-- 内容区域 -->
                <!-- 配置中心 -->
                <configuration-center v-if="currentTab ===3"></configuration-center>
                <!-- 数据中心 -->
                <data-center v-if="currentTab ===2"></data-center>
                <!-- 告警统计 -->
                <alarm-statistics v-if="currentTab ===1"></alarm-statistics>
            </div>
        </div>
    </div>
</template>

<script>

    import ConfigurationCenter from "./components/configuration-center";
    import DataCenter from "./components/data-center";
    import AlarmStatistics from "./components/alarm-statistics";
    export default {
        name:'AlertCenter',
        components: {
            AlarmStatistics,
            DataCenter,
            ConfigurationCenter
        },
        computed:{
            getUserInfo(){
                return this.$store.state.userInfo
            }
        },
        data() {
            return {
                weather: localStorage.getItem('weather') ? JSON.parse(localStorage.getItem('weather')) : '',
                currentTab: 1, // 默认选中告警统计
                queryParams: {
                    pageNo: 1,
                    pageSize: 10,
                    param:{
                        endTime:'',
                        startTime:''
                    }
                },
                form: {
                    analysis:1,// 默认热耗
                    startTime:'',
                    endTime: '',
                    typeDom:'',// 类比源
                    type:'1',// 能耗类别
                },
            };
        },
        created() {

        },
        activated() {
            this.currentTab = 1; // 默认选中告警统计
        },
        watch: {

        },
        methods: {
            // 返回引导页
            returnBack(){
                this.$router.push({
                    path: '/'
                })
            }
        }
    };
</script>

<style lang="scss" type="text/scss">

    .index-box{
        background: url(../../assets/common/b-bg.png) center/1920px 1080px no-repeat;
        width: 100%;
        height: 100%;
        position: relative;
        background-size: cover;

        .navbar-logo {
            width: 100%;
            height: 95px;
            line-height: 95px;
            font-size: 42px;
            text-align: center;
            background: url('../../assets/common/top-bg.png') center/100% no-repeat;
            position: relative;

            span{
                letter-spacing: 5px;
                text-indent: 10px;
                font-weight: 800;
                background-image: -webkit-linear-gradient(bottom, #79a8f5, #f3f7ff);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                -moz-user-select: none;
                -khtml-user-select: none;
                user-select: none;
            }
        }

        .ctn{
            width: 100%;
            height: calc(100vh - 53px);
            margin-top: -52px;
            background: url("../../assets/common/main-bg.png") center/100% 100% no-repeat;
            position: relative;

            .ctn-top-bar{
                height: 75px;
                line-height: 95px;
                align-items: center;
                display: flex;
                justify-content: space-between;
                padding: 0 61px;
                position: relative;
                z-index: 999;

                >div{
                    height: 100%;
                    width: 30%;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    &:first-child{
                        justify-content: flex-end;
                    }

                    .fl{
                        height: 37px;
                        line-height: 37px;
                        font-size: 17px;
                        color: rgba(255,255,255,0.7);
                        cursor: pointer;
                        background: url("../../assets/common/btn-bg.png") no-repeat center/100% 100%;
                        display: inline-block;
                        padding-left: 43px;
                        padding-right: 32px;

                        &:last-child{
                            margin-right: 0;
                        }

                        &.active{
                            color: #00e4ff;
                        }
                    }

                    .rl{
                        font-size: 18px;
                        font-weight: bold;
                        color: #ffffff;
                        padding-left: 78px;
                    }
                }

            }

            .main-ctn {
                padding: 0 60px;
                height: calc(100% - 118px);
                flex: 1;
                display: flex;
                flex-direction: column;
                position: relative;

                .tabs{
                    height: 50px;
                    line-height: 50px;
                    color: #00e4ff;
                    font-size: 20px;
                    display: flex;
                    justify-content: end;

                    .tab-item{
                        width: 180px;
                        height: 50px;
                        background: rgba(12,132,255,0.16);
                        border: 1px solid #008aff;
                        display: inline-block;
                        cursor: pointer;

                        &:first-child{
                            border-radius: 5px 0 0 0;
                        }
                        &:last-child{
                            border-radius: 0 5px 0 0;
                        }

                        &.active{
                            background: #2063a8;
                            border: 1px solid #008aff;
                            color: #ffffff;
                        }
                    }
                }

                .t-ctn{
                    width: 100%;
                    height: calc(100% - 47px);
                    background: url("../../assets/common/tab-bg.png") no-repeat center/100% 100%;

                    .c-title{
                        height: 108px;
                        line-height: 108px;
                        font-size: 20px;
                        margin-right: 42px;
                        margin-left: 46px;
                        position: relative;
                        color: #00e4ff;
                        text-align: left;

                        .line{
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            height: 4px;
                            width: 100%;
                            background: url("../../assets/common/basi-line.png") no-repeat center/100% 100%;
                        }
                    }

                    .s-n-ctn-main{
                        margin-right: 42px;
                        margin-left: 46px;

                    }
                }
            }
        }
    }
</style>
